<template>
    <el-container class="mev-div-border">
        <el-main style="padding: 5px; width: 100%;color: white">
            <el-row>
                <div >当前任务:{{ taskModel.name }}</div>
            </el-row>

            <el-row style="width: fit-content">
                <el-col :span="6">
                    <el-button size="mini" @click="showCreateTaskDialog"><i class="iconfont el-icon-document-add"></i></el-button>
                </el-col>
                <el-col :span="6">
                    <el-button size="mini" @click=""><i class="iconfont iconimport"></i></el-button>
                </el-col>
                <el-col :span="6">
                    <el-button size="mini" @click=""><i class="iconfont iconexport"></i></el-button>
                </el-col>
                <el-col :span="6">
                    <el-button size="mini" @click="removeAll"><i class="iconfont iconremove action-icon-last-class"></i></el-button>
                </el-col>
            </el-row>
            <el-scrollbar wrap-class="list" wrap-style="color: red; height:45vh;" view-class="view-box" view-style="font-weight: bold;height:100%;" :native="false">
                <el-tree
                    ref="tree"
                    :data="LayerTreeData"
                    :props="defaultProps"
                    :default-checked-keys="defaultCheckedKeys"
                    default-expand-all
                    show-checkbox
                    node-key="id"
                    @check-change="nodeChecked"
                    @node-click="nodeClick"
                    style="margin-bottom: 20px"
                >
                </el-tree>
            </el-scrollbar>
        </el-main>
        <el-dialog title="新建任务" :visible.sync="taskDialogVisible" append-to-body>
            <el-form :model="taskModel">
                <el-form-item label="任务名称">
                    <el-input v-model="taskModel.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="taskDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createTaskOK">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import TaskManager from "../../plugins/task/TaskManager";

export default {
    name: "TaskComponent",
    data: function() {
        return {
            LayerTreeData: [],
            defaultProps: {
                children: "children",
                label: "name"
            },
            defaultCheckedKeys: ["1", "2"],
            taskDialogVisible: false,
            taskModel: {
                name: "",
                type: ""
            }
        };
    },
    mounted() {
        const self = this;
        this.$nextTick().then(() => {
            self.LayerTreeData = TaskManager.taskTreeData;
            TaskManager.listenUpdate(self.treeUpdateFunc);
        });
    },
    beforeDestroy() {
        TaskManager.unlistenUpdate(this.treeUpdateFunc);
    },
    methods: {
        showCreateTaskDialog() {
            this.taskDialogVisible = true;
        },
        createTaskOK() {
            this.taskDialogVisible = false;
            TaskManager.instance().createTask(this.taskModel.name);
        },
        nodeChecked(data, checked) {
            if (data.id == 2) {
                TaskManager.instance().handleTrackChecked(checked);
            }
        },
        treeUpdateFunc(e) {
            let that = this;
            that.LayerTreeData = e.detail.data;
            let checkedKeys = [];
            function checks(carr) {
                carr.forEach(function(c) {
                    if (c.checked == true) {
                        checkedKeys.push(c.id);
                    }
                    if (c.children) {
                        checks(c.children);
                    }
                });
            }
            checks(that.LayerTreeData);
            //this.$refs.tree.setCheckedKeys(checkedKeys);
            this.$nextTick().then(function() {
                that.defaultCheckedKeys = checkedKeys;
            });
        },
        nodeClick() {}
    }
};
</script>

<style scoped></style>
